<template>
    <div class="distance-setting">
        <div class="control">
            <el-button type="primary" @click="add">新增距离</el-button>
        </div>
        <elTable :formData="formData">
                <el-table-column prop="distance" label="终端客户限销距离（米)" align="center"></el-table-column>
                <el-table-column prop="times" label="有效时间" align="center">
                    <template slot-scope="scope">
                        {{scope.row.startTime}}-{{scope.row.endTime}}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="设置时间" align="center">
                </el-table-column>
                <el-table-column prop="user" label="操作人" align="center"></el-table-column>
                <el-table-column prop="action" label="操作" align="center" width="120px;" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text"  @click="editer(scope.row)">修改</el-button>
                        <el-button type="text"  @click="deletes(scope.row, scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
        </elTable>
        <dialogs
        :visible="visible"
        :title="!isEditer ? '新增' : '编辑'"
        width="600px"
        @confirm="save"
        :confirmText="!isEditer ? '确认' : '保存'"
        >
            <el-form v-model="form" label-width="120px" :inline="true">
                <el-form-item prop="distance" label="限销距离（米)">
                    <el-input v-model.trim="form.distance" placeholder="请输入限销距离" style="width: 400px"></el-input>
                </el-form-item>
               <el-form-item prop="times" label="有效时间">
                   <el-date-picker
                    v-model="form.times"
                    type="datetimerange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-form> 
        </dialogs>
    </div>
</template>
<script>
import elTable from "@/components/xForm/elTable"
export default {
    name: 'distanceSetting',
    components: {
        elTable
    },
    data () {
        return {
            isEditer: false,
            formData: {
                currentPage: 1,
                pageSize: 10,
                total: 0,
                data: [
                ]
            },
            form: {
                distance: '',
                times: [],
                id: ''
            },
            visible: {
                show: false
            }
        }
    },
    methods: {
        editer (item) {
            this.isEditer = true
            this.form = {
                distance: item.distance,
                times: [item.startTime, item.endTime],
                id: item.id
            }
            this.visible.show = true
        },
        deletes () {
            this.$confirm('确定要删除么?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.formData.data.splice(index,1)
                    this.formData.total = 0
                    this.$message.success('删除成功')
                }).catch(() => {
            })
        },
        add () {
            if (this.formData.data.length) {
                this.$message.error('已添加过了， 不能再次添加')
            }
            this.visible.show = true
        },
        save () {
            const {form: {distance, times}} = this
            if (distance == '') {
                this.$message.error('请输入限销距离')
                return
            }
            if (!times || times.length == 0) {
                this.$message.error('请选择有效时间')
                return
            }
            let p = {
                id: 1,
                distance,
                createTime: this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
                startTime: this.$moment(new Date(times[0])).format('YYYY-MM-DD HH:mm:ss'),
                endTime: this.$moment(new Date(times[1])).format('YYYY-MM-DD HH:mm:ss'),
                user: 'admin'

            }
            this.$set(this.formData, 'data', [p])
            this.$set(this.formData, 'total', 1)
            this.$message.success(this.form.id ? '编辑':'添加成功')
            this.visible.show = false
        }
    }
}
</script>
<style lang="scss" scoped>
.distance-setting {
    .control {
        padding: 0 16px 16px 0;
    }
}
</style>